<template>
	<view class="">
	
		<view class="search-box">
			<view>
				<uni-search-bar 
				@input="input" 
				placeholder="搜索" 
				radius='20'
				clearButton="auto"
				cancelButton="none"
				:value="searchValue"
				></uni-search-bar>
			</view>
		</view>
		
		<!-- 搜索列表 -->
		<view class="sugg-list" v-if="SearchList.length !== 0">
		  <view class="sugg-item" v-for="(item, i) in SearchList" :key="i" @click="gotoDetail(item.goods_id)">
			<view class="goods-name">{{item.goods_name}}</view>
			<u-icon name="arrow-right" size="16"></u-icon>
		  </view>
		</view>
	
		<!-- 历史列表 -->
		<view class="history-box" v-else>
			<!-- 标题 -->
			<view class="history-title">
				<text>搜索历史</text>
				<u-icon name="trash" size="16" @click="cleanHistory"></u-icon>
			</view>
			<!-- 列表 -->
			<view class="history-list">
				<uni-tag 
				:text="item" inverted="true" 
				circle="true" v-for="(item, i) in historys" :key="i"
				@click="input(item)"
				></uni-tag>
			</view>
		</view>
	</view>
</template>

<script>
	
import { getSearch } from '@/config/api.js';
	export default {
		data() {
			return {
				timer: null,
				searchKeyword: '',
				SearchList: [],
				historyList: ['祈り','恵','promiss you'],
				searchValue:''
			};
		},
		onLoad() {
			this.historyList = JSON.parse(uni.getStorageSync('searchKeyword') || '[]')
			
		},
		//优化搜索历史
		computed:{
			historys(){
				return [...this.historyList].reverse()
			}
		},
		methods:{
			test(e){
				console.log(e);
			},
			//防抖
			input(e){
				
				clearTimeout(this.timer)
				
				this.timer = setTimeout(()=>{
					//获取搜索关键字和设置inpuvalue
					this.searchKeyword = e
					console.log(e);
					this.searchValue = e
					this.getSearchList()
				}, 500)
				
			},
			// 获取搜索列表
			async getSearchList(){
				if(this.searchKeyword === ''){
					this.SearchList = []
					return 
				}
				const {data:res} = await getSearch(this.searchKeyword)
				this.SearchList = res.message
				if(this.SearchList.length == 0){
					this.$u.toast('商品没有该物品')
				}
				console.log(res);
				this.saveSearchHistory()
			},
			gotoDetail(id){
				uni.navigateTo({
					url: '../goods_detail/goods_detail?goods_id='+id
				})
			},
			
			//历史数据
			saveSearchHistory(){
				
				// this.historyList.unshift(this.searchKeyword)
				// set 可以吧集合转为数组 set集合所有元素只会出现一次
				const set = new Set(this.historyList)
				set.delete(this.searchKeyword)
				set.add(this.searchKeyword)
				this.historyList = Array.from(set)
				//以json字符串的形式存储
				uni.setStorageSync('searchKeyword', JSON.stringify(this.historyList))
			},
			cleanHistory(){
				this.historyList = []
				uni.setStorageSync('searchKeyword', '[]')
			}
		}
	}
</script>

<style lang="scss">
	.search-box {
		//吸顶的效果
		position: sticky;
		top:0;
		z-index: 15;
	}
	.sugg-list {
		padding: 0 5px;
		.sugg-item {
			font-size: 12px;
			padding: 13px 0;
			border-bottom: 1px solid #efefef;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.goods-name {
				//文本不允许换行
				white-space: nowrap;
				overflow: hidden;
				//文本超出后，使用...代替
				text-overflow: ellipsis;
				margin-right: 3px;
			}
		}
	}
	.history-box {
		
		.history-title {
			display: flex;
			padding: 10rpx 10rpx;
			justify-content: space-between;
			align-items: center;
			height: 40px;
			font-size: 13px;
			border-bottom: 1px solid #efefef;
		}
		.history-list {
			display: flex;
			flex-wrap: wrap;
			.uni-tag {
				margin: 20rpx 10rpx 0;
				color: black
			}
			
		}
	}
</style>
